<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>07_事件处理</title>
  </head>
  <body>
    <!--
1. 绑定监听:
  v-on:xxx="fun"
  @xxx="fun"
  @xxx="fun(参数)"
  默认事件形参: event
  隐含属性对象: $event
2. 事件修饰符:
  .prevent : 阻止事件的默认行为 event.preventDefault()
  .stop : 停止事件冒泡 event.stopPropagation()
3. 按键修饰符
  .keycode : 操作的是某个keycode值的健
  .enter : 操作的是enter键
-->

    <div id="example">
      <h2>1. 绑定监听</h2>
      <!-- 直接写回调函数，参数是event -->
      <button @click="handleClick1">按钮1</button>
      <!-- 写成函数调用的形式，调用函数传入的参数就是回调函数的参数 -->
      <button @click="handleClick2(123, 456, 789)">按钮2</button>
      <!-- $event代表event对象：代表绑定事件的第一个参数 -->
      <button @click="handleClick3(123, 456, 789, $event)">按钮3</button>
      <h2>2. 事件修饰符</h2>
      <!-- 
        .prevent 禁止事件默认行为
        .stop    阻止事件冒泡
        剩下的事件修饰符：https://cn.vuejs.org/v2/api/#v-on
       -->
      <a href="http://www.atguigu.com" @click.prevent="handleClick4">尚硅谷</a>
      <h2>3. 按键修饰符</h2>
      <!-- 只能用于按键事件：keyup keydown -->
      <input type="text" @keyup.enter="handleKeyup" />
      <input type="text" @keyup.13="handleKeyup" />
    </div>

    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      new Vue({
        el: "#example",
        data: {},
        methods: {
          handleClick1(event) {
            console.log(event);
          },
          handleClick2(...rest) {
            console.log(rest);
          },
          handleClick3(...rest) {
            console.log(rest);
          },
          handleClick4(e) {
            // e.preventDefault();
          },
          handleKeyup(e) {
            // if (e.keyCode === 13) {
            console.log("enter");
            // }
          },
        },
      });
    </script>
  </body>
</html>
